<template>
 <div id='linck'>
     <div class="content" >
         <AppFiledTextarea v-model="remark" placeholder="请输入..." />
         <button class='save'  @click='savevisit()'>保存</button>
         <div class="ulbox">
            <p class='lititle'>历史记录</p>
            <div class="record_list">
                <div v-if='listd.total>0'>
                    <ul >
                        <li class="record_wrap" v-for="(item,index) in listd.data" :key='index'>
                            <div class="record_top">
                            <div class="record_type" v-html="turn(item.return_visit_remark)"></div>
                            </div>
                            <div class="record_bottom">
								<div><span>	{{ item.return_visit_time }}</span></div>
								<div>
									<span v-if="item.user_type==1">	{{item.user_name }}</span>
									<span v-if="item.user_type==2">	{{item.admin_user_name}}</span>
								</div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="module_empty_wrap" v-else>
                    <NoContent pmt-text="您当前暂无回访记录~" />
                    <div class="empty_btn_com"></div>
                </div>
                </div>
         </div>
     </div>
 </div>
</template>

<script>
import AppFiledTextarea from '@/components/AppFiledTextarea'
import NoContent from '@/components/module/NoContent'
import { addrevisit, getrevisit } from '@/api/visit'
import { list } from '@/mixins'
export default {
	name: 'linkCustomer',
	mixins: [list],
	components: {
		AppFiledTextarea,
		NoContent
	},
	data() {
		return {
			remark: '',
			prebook_id: '',
			query: '',
			listd: []
		}
	},
	watch: {

	},
	onLoad(val) {
		this.query = val
		this.owner_user_id = this.query.owner_user_id
		this.prebook_id = this.query.prebook_id
	},
	mounted() {
		this.visit()
	},
	onPullDownRefresh() {
		let that = this
		this.resetList()
		this.visit().then(res => {
			uni.stopPullDownRefresh()
		})
	},
	// 加载更多
	onReachBottom() {
		if (this.list.loading) {
			return
		}
		if (this.list.data.length < this.list.total) {
			this.visit().then(res => {
				uni.stopPullDownRefresh()
			})
		} else {
			uni.stopPullDownRefresh()
			uni.showToast({
				title: '没有更多了',
				duration: 2000,
				icon: 'none'
			})
		}
	},
	methods: {
		turn(data) {
			return data.replace(/(\r\n|\n|\r)/gm, '<br/>')
		},
		//   最后一天在这里敲代码，望各自珍重
		savevisit() {
			if (this.remark == '') {
				this.mesg('请输入内容！')
			} else {
				let params = {
					prebook_id: this.prebook_id,
					return_visit_remark: this.remark
				}
				addrevisit(params).then((res) => {
					if (res.status === 'success') {
						// eslint-disable-next-line prefer-destructuring
						this.mesg(res.data)
						this.visit()
					} else {
						this.mesg(res.errors.message)
					}
				})
			}
		},
		mesg(msg) {
			uni.showToast({
				title: msg,
				icon: 'none'
			})
		},
		// 有bug自己找
		visit() {
			return getrevisit({
				prebook_id: this.prebook_id,
				page: this.list.page,
				page_size: 10
			}).then(res => {
				if (res.status === 'success') {
					this.listd = res.data
					// this.listd.total = res.data.total
				} else {
					this.mesg(res.errors.message)
				}
			})
		}
	}
}
</script>

<style scoped lang="scss">
    #linck{
        .save{
            color: #3A1B04;
            font-size:24px;
            width: 90%;
            height: 90px;
            outline: none;
            border: none;
            margin-top: 60px;
            margin-left: 5%;
            line-height: 90px;
            border-radius: 45px;
            background: #FFD11A;
        }
        .ulbox{
            margin-top: 60px;
            .lititle{
                padding-left: 20px;
                color: #999999;
            }
            .record_list {
                margin-top: 40px;
                margin-bottom: 40px;
                width: 90%;
                margin-left: 5%;
                ul {
                    border-left: 2px solid #ccc;
                }
                .record_wrap {
                    padding-left: 30px;
                    margin-bottom: 50px;
                    .record_top {
                        position: relative;
                        top: -10px;
                        display: flex;
                        align-items: center;
                        color: #666;
                        .record_type {
                            font-size: 30px;
                            text-align: justify;
                            word-break: break-all;
                        }
                        & > div {
                            margin-right: 20px;
                        }
                    }
                    .record_top::before {
                        position: absolute;
                        left: -42px;
                        content: '';
                        display: inline-block;
                        width: 16px;
                        height: 16px;
                        border: 4px solid #fff;
                        border-radius: 50%;
                        background-color: #ccc;
                    }
                    .record_bottom {
						margin-right: 20px;
                        /*background-color: #f5f5f5;*/
                        border-radius: 16px;
                        display: flex;
                        font-size: 24px;
                        color: #999999;
                        align-items: center;
						justify-content: space-between;
                        .record_img {
                            width: 168px;
                            height: 130px;
                            margin-right: 20px;
                            img {
                                width: 100%;
                                height: 100%;
                                border-top-left-radius: 16px;
                                border-bottom-left-radius: 16px;
                            }
                        }
                        .attr_img {
                            width: 130px;
                        }
                        .record_bottom_main {
                            color: #333;
                            font-size: 30px;
                            margin-bottom: 10px;
                        }
                    }
                }
                .record_wrap:nth-child(1) {
                    .record_type {
                        color: #ff6900;
                    }
                    .record_top::before {
                        background-color: #ff9600;
                    }
                }
            }
        }
    }
</style>
